<template>
  <div class="scroll-content">
    <div class="scroll-item submit-wrap" style="pointer-events: auto;">
      <div class="submit-content">
        <div class="submit-tips">
          <img class="submit-tips-icon-1" src="../assets/page/text-icon.png" alt="">
          <img class="submit-tips-icon-2" src="../assets/page/text-icon.png" alt="">
          <img class="submit-tips-icon-3" src="../assets/page/text-icon.png" alt="">
          <img class="submit-tips-icon-4" src="../assets/page/text-icon.png" alt="">
          <p>
            “诸子百家半山东”。作为中华文明的重要发祥地之一，山东历史文化底蕴深厚，是中华文明五个突出特性的具体体现，在灿烂辉煌的中华传统文化“谱系”中，占据特殊而重要地位。
            近年来，山东牢记习近平总书记嘱托，深耕人文沃土，广泛践行社会主义核心价值观，大力提升全社会文明程度，不断打造山东文化“两创”新标杆，着力立起新时代山东“文化泰山”。
          </p>
          <p>
            你的身边有哪些文化“两创”山东实践的生动案例？你对山东文化产业高质量发展有什么意见建议？快来留言吧！
          </p>
        </div>
        <div class="submit-form-wrap">
          <div class="submit-form-name-wrap">
            <p>昵称：</p>
            <input type="text" class="submit-input" placeholder="" :value="user.nikename" disabled>
          </div>
          <textarea class="submit-textarea" placeholder="请输入" v-model="data"></textarea>
          <button id="submit-btn" class="submit-btn" @click="submit()">提交</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import {onMounted, reactive, ref} from "vue";

const data = ref("")
const user = ref({})

function submit() {
  console.log(data.value)
}

onMounted(() => {
  getUserInfo()
})

function getUserInfo() {
  user.value = JSON.parse(sessionStorage.getItem('username'));
}
</script>

<style scoped>


.scroll-content .submit-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
  background: no-repeat url(../src/assets/page/bg.png);
}

.scroll-content .scroll-item {
  display: inline-flex;
  align-items: center;
  height: 100vh;

}

.submit-textarea {
  box-sizing: border-box;
  margin-top: 25px;
  display: block;
  padding: 10px;
  font-size: 18px;
  width: 100%;
  height: 185px;
  background-color: #ffffff;
  outline: none;
}


.scroll-content .scroll-item {
  display: inline-flex;
  align-items: center;
  height: 100vh;

}

.scroll-content .submit-tips {
  box-sizing: border-box;
  position: relative;
  padding: 50px 24px;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  line-height: 30px;
  margin: 60px;
}

.submit-form-wrap {
  width: 537px;
  margin: 0 auto;
  margin-top: 30px;
}

.submit-form-name-wrap {
  display: flex;
  align-items: center;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
}

.submit-input {
  width: 106px;
  padding: 0 10px;
  border: none;
  border-bottom: 1px solid #ffffff;
  background: none;
  font-size: 16px;
  font-weight: 400;
  color: #ffffff;
  outline: none;
}

.submit-btn {
  display: block;
  margin: 0 auto;
  margin-top: 43px;
  width: 214px;
  height: 58px;
  line-height: 58px;
  text-align: center;
  font-size: 16px;
  color: #ffffff;
  /* outline: none; */
  border: none;
  background: no-repeat center / 100% url(../src/assets/page/btn.png);
  cursor: pointer;
}

.submit-tips-icon-1, .submit-tips-icon-2, .submit-tips-icon-3, .submit-tips-icon-4 {
  position: absolute;
  width: 28px;
  height: 28px;
}

.submit-tips-icon-1 {
  top: 0;
  left: 0;
  transform: rotate(90deg);
}

.submit-tips-icon-2 {
  top: 0;
  right: 0;
  transform: rotate(180deg);
}

.submit-tips-icon-3 {
  bottom: 0;
  left: 0;
}

.submit-tips-icon-4 {
  bottom: 0;
  right: 0;
  transform: rotate(270deg);
}


</style>